﻿@using jstreeMVCWrapper.Helpers
@model jstreeMVCWrapper.Models.TreeModel

@{
    Layout = null;
}

<!DOCTYPE html>

<html>
<head>
    <meta name="viewport" content="width=device-width" />
    <title>MVC jsTree Wrapper Example</title>

	<link href="/Content/jsTree/style.css" rel="stylesheet" />
	<script src="/Scripts/jQuery/jquery-2.1.0.js"></script>
	<script src="/Scripts/jsTree/jstree.js"></script>
	<script src="/Scripts/jsTree/jstree.wholerow.js"></script>
	<script src="/Scripts/jsTree/jstree.types.js"></script>
	<script src="/Scripts/jsTree/jstree.unobtrusive.js"></script>

	<script type="text/javascript">
		function onTreeFolderSelected(e, data)
		{
			$("#MessageBox").html("selected node id:" + data.node.id);
			var retVal = null;
			if (data.node.state.opened == false)
			{
				retVal = data.instance.toggle_node(data.node);
			}
			return retVal
		}
	</script>

</head>
<body>
	<div id="MessageBox"></div>
    <div>
    @(Html.JSTreeView(Model.TreeNodes)
	.ContrainerID("TreeContainer")
	.Children(n => n.Childern)
	.ItemID(n=>n.NodeID.ToString())
	.ItemType(n=>n.NodeType.ToString())
	.IsSelected(n=> n.NodeID == 1)
	.OnNodeSelect("onTreeFolderSelected")
	.Plugins("wholerow", "types")
	.CoreConfig(new
	{
		expand_selected_onload = true,
		multiple = false
	})
	.TypesConfig(new
	{
		Root = new { icon = "../Content/jsTree/Root.png" },
		Folder = new { icon = "../Content/jsTree/Folder.png" },
		File = new { icon = "../Content/jsTree/File.png" },
		@default = new { icon = "../Content/jsTree/Folder.png" }
	})
	.ItemTemplate(@<text> <a href="#" >@item.NodeName</a> </text>)
	)
    </div>
</body>
</html>
